<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	{load href="__static__/hry/css/reset.css" /}
	{load href="__static__/hry/css/iconfont.css" /}
	{load href="__static__/hry/css/style.css" /}
	
	{load href="__static__/hry/js/jquery-1.9.1.min.js" /}

	{load href="__static__/hry/js/common.js" /}
<script>
        window.onload = function(){
            waterFull('grid','grid-item');
        }

        function waterFull(parent,children){
            var oParent = document.getElementById(parent);
            //var oBoxs = parent.querySelectorAll(".box");

            var oBoxs = getByClass(oParent,children);

            //计算整个页面显示的列数

            var oBoxW = oBoxs[0].offsetWidth;

            var cols = 2;

            //设置main的宽度，并且居中

            oParent.style.cssText = 'width:'+1200 +'px; margin: 0 auto';

            //找出高度最小的图片，将下一个图片放在下面

            //定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度

            var arrH = [];
			var maxH;
            for(var i = 0; i< oBoxs.length ; i++){
                if(i < cols){
                    arrH.push(oBoxs[i].offsetHeight);
				
                }
                else{
                    var minH = Math.min.apply(null,arrH);
                    
                    var minIndex = getMinhIndex(arrH,minH);

                    oBoxs[i].style.position = 'absolute';
                    oBoxs[i].style.top= minH + 'px';
                    oBoxs[i].style.left = minIndex * oBoxW + 'px';
                    //  oBoxs[i].style.left = arrH[minIndex].;

                    arrH[minIndex] += oBoxs[i].offsetHeight;
                }
            }
			maxH = Math.max.apply( Math, arrH )
          
            oParent.style.height = maxH+'px'


        }
        function getByClass(parent,className){

            var boxArr = new Array();//用来获取所有class为box的元素

            oElement = parent.getElementsByTagName('*');

            for (var i = 0; i <oElement.length; i++) {

                if(oElement[i].className == className){

                    boxArr.push(oElement[i]);

                }
            };
            return boxArr;
        }


        //获取当前最小值得下标
        function getMinhIndex(array,min){

            for(var i in array){

                if(array[i] == min)

                    return i;
            }
        }
    </script>
</head>
<body style="padding-top: 0">
<div class="index-section3-item">
      <div class="grid " id="grid">
		{volist name="dataList" id="vo"}
        <a href="{:url('Project/detail',['id'=>$vo.id])}" class="grid-item" target="_parent">
            <div class="main">
                <img src="{$vo.thumb}" alt="{$vo.project_name}">
                <div class="words">
                    <h3>{$vo.project_name}</h3>
                    <p class="des">{$vo.description}</p>
                    <div class="info">
                        <div class="left">
                            <p>认投进度 </p>
                            <p>{:GetProjectBar($vo.id,1)}</p>
                        </div>
                        <div class="right">
                            <p>剩余时间</p>
                            <p>{:OverTime($vo.end_time)}</p>
                        </div>
                    </div>
                </div>
            </div>

        </a>
		{/volist}
    </div>
</div>
</body>
</html>